<template>
    <div class="payBox">
        <!-- 结算头部部分 -->
        <div class="payTop">
            <van-nav-bar title="订单结算台" left-arrow @click-left="$router.back()" />
        </div>
        <!-- 收货地址 -->
        <div class="addressMsg">
            <van-cell title="收货人: 张三  13800138000" label="收货地址: 广东省广州市天河区体育东路138号" is-link @click="onClickAddress" />
        </div>
        <!-- 商品列表 -->
        <div class="productList">
            <ProductCardPay />
        </div>
        <!-- 订单详情 (订单总金额、是否有优惠卷,配送费)-->
        <div class="payDetails">
            <van-cell title="订单总金额" value="￥198.00" />
            <van-cell title="优惠券" value="无可用优惠券" is-link />
            <van-cell title="配送费" value="￥10.00" />
        </div>
        <!-- 支付方式 -->
        <div class="payType">
            <van-cell title="支付方式" value="在线支付" is-link />
        </div>
        <!-- 买家留言 -->
        <div class="buyerMsg">
            <van-field label="买家留言" type="textarea" placeholder="选填:对本次交易的说明" autosize />
        </div>
        <!-- 底部支付栏 -->
        <div class="totalPay">
            <div class="totalPrice">
                合计: <span class="price">￥198.00</span>
            </div>
            <div class="payBtn">
                提交订单
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'psyIndex',

    data() {
        return {
            proDetails: []
        };
    },
    created() {
        this.getproductDetails();
    },
    mounted() {

    },

    methods: {
        onClickAddress() {
            this.$router.push({ path: '/address' });
        },
        getproductDetails() {
            //判断是否是从商品详情页跳转过来的,是则获取vuex中的productPay数据
            //否则获取vuex中的cartList数据
            // console.log(this.$route.query.from);
            // if (this.$route.query.from === 'productDetails') {
            //     this.proDetails = this.$store.state.productPay;
            //     console.log(this.proDetails);
            //     console.log('productDetails')
            // } else {
            //     // this.proDetails = this.$store.state.cartList.fillter(item => item.isChecked);
            //     console.log('cartList')
            // }

        }
    },
};
</script>
<style lang="scss" scoped>
.payBox {
    // background: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 60px;

    .addressMsg {
        // background: #fff;
        // border: 1px solid #111;
        border-radius: 8px;
        box-shadow: 5px 2px 5px rgba(0, 0, 0, 0.1);
    }

    .productList {
        margin-top: 10px;
        margin: 10px;
        background: #fff;
        //盒子阴影
        box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
        padding-bottom: 5px;
        border-radius: 8px;

        // height: 300px;

    }

    .payDetails {
        margin: 10px;
        background: #fff;
        //盒子阴影
        box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }

    .payType {
        margin: 10px;
        background: #fff;
        //盒子阴影
        box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }

    .buyerMsg {
        margin: 10px;
        background: #fff;
        //盒子阴影
        box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
        border-radius: 8px;

        .van-field__control {
            font-size: 14px;
        }
    }

    .totalPay {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background: #fff;
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        box-sizing: border-box;

        .totalPrice {
            font-size: 16px;

            .price {
                color: #f40;
                font-weight: bold;
                font-size: 18px;
            }
        }

        .payBtn {
            width: 100px;
            height: 35px;
            background: #f40;
            color: #fff;
            text-align: center;
            line-height: 35px;
            border-radius: 5px;
            font-size: 14px;
        }
    }
}
</style>